﻿var curColor = "#383635";
var curWidth = 5;
var clickColor = new Array();
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var clickWidth = new Array();
var paint;
var canvas;
var context;
var canvasWidth;
var canvasHeight;
var userId;
var lockCanvas = 1;
var imageBk = new Image();
var answer = "小兔纸";

function addClick(x, y, color, width, dragging) {
  clickX.push(x);
  clickY.push(y);
  clickColor.push(color);
  clickWidth.push(width);
  clickDrag.push(dragging);
}

function redraw() {
  context.fillStyle = '#ffffff';
  //context.fillRect(0, 0, canvasWidth, canvasHeight);
  context.drawImage(imageBk, 0, 0, canvasWidth, canvasHeight);
  
  context.lineJoin = "round";
                        
  for(var i=0; i < clickX.length; i++) {                
	context.lineWidth = clickWidth[i];
    context.beginPath();
    if(clickDrag[i] && i) {
      context.moveTo(clickX[i-1], clickY[i-1]);
     }
	 else {
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
	 context.strokeStyle = clickColor[i];
     context.stroke();
  }
}

window.gameClient = function(data) {
	paint = data.paint;
	if(data.isAdd == true) {
		//console.log(typeof(data.dragging));
		if(typeof(data.dragging) != "undefined") {
			addClick(data.x, data.y, data.color, data.width, data.dragging);
		}
		else addClick(data.x, data.y, data.color, data.width);
	}
	redraw();
}

var canvasPos;
var mouseX;
var mouseY;

function handleMouseMove(e) {
	e.preventDefault();
	if(lockCanvas == 0) {
		if(paint) {
			//addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
			//redraw();
			$("#canvas").unbind("mousemove", handleMouseMove);
			canvasPos = this.getBoundingClientRect();
			mouseX = e.pageX - canvasPos.left;
			mouseY = e.pageY - canvasPos.top;
			window.socket.emit('data', {isAdd: true, x: mouseX, y: mouseY, color: curColor, width: curWidth, dragging: true, paint: paint});
			setTimeout(function() {
				$("#canvas").mousemove(handleMouseMove);
			}, 1000 / 30);
		}
	}
}

window.onbeforeunload = function() {
	window.socket.emit('logout', {userId: userId});
}

$(document).ready(function() {
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	canvasWidth = canvas.width;
	canvasHeight = canvas.height;
	imageBk.src = "images/design_r9_c4.png";
	context.drawImage(imageBk, 0, 0, canvasWidth, canvasHeight);
	
	if (window.socket) {
		socket.on('data', function (data) {
			window.gameClient(data);
		});
		socket.on('sysRes', function (data) {
			if(data.type == "userId") {
				userId = data.userId;
			}
			else if(data.type == "lockCanvas") {
				lockCanvas = 1;
				$("#apply-canvas").button("disable");
			}
			else if(data.type == "unlockCanvas") {
				lockCanvas = 0;
				$("#apply-canvas").button("disable");
			}
		});
	}
	
	$("#apply-canvas").button();
	$("#apply-canvas").click(function(evt) {
		evt.preventDefault();
		window.socket.emit("syscall", {type: "applyCanvas", userId:userId});
	});
	
	$("#answer-drawing").button();
	$("#answer-drawing").click(function(evt) {
		evt.preventDefault();
		if($("textarea#xchatbox-msg-input").val() == answer) {
			alert("好吧。。。你答对了。。。");
			window.socket.emit('msg', "我答对咯。。。");
		}
		$("textarea#xchatbox-msg-input").val("");
	});
	
	$(".color-selector").each(function() {
		$(this).css("background-color", $(this).data("color"));
		$(this).click(function(evt) {
			evt.preventDefault();
			curColor = $(this).data("color");
		});
	});
	
	$( "#size-selector" ).slider({
		orientation: "vertical",
		range: "min",
		min: 1,
		max: 45,
		value: 5,
		slide: function( event, ui ) {
			curWidth = ui.value;
			$(".ui-slider-handle").css("width", ui.value + "px");
		}
	});
	$(".ui-slider-handle").css("width", "5px");
	
	$("#canvas").mousedown(function(e) {
		e.preventDefault();
		if(lockCanvas == 0) {
			canvasPos = this.getBoundingClientRect();
			mouseX = e.pageX - canvasPos.left;
			mouseY = e.pageY - canvasPos.top;
			//paint = true;
			//addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
			//redraw();
			window.socket.emit('data', {isAdd: true, x: mouseX, y: mouseY, color: curColor, width: curWidth, paint: true});
		}
	});
	
	$("#canvas").mousemove(handleMouseMove);
	 
	$("#canvas").mouseup(function(e) {
		e.preventDefault();
		if(lockCanvas == 0) {
			paint = false;
			window.socket.emit('data', {isAdd: false, paint: false});
		}
	});
	
	$("#canvas").mouseleave(function(e) {
		e.preventDefault();
		if(lockCanvas == 0) {
			//paint = false;
			window.socket.emit('data', {isAdd: false, paint: false});
		}
	});
});